<template>
  <div class="box">
 <div>
      <header>
      <div class="header-left" @click="goBack02">&lt;</div>
      <div class="header-centent">
           大学考试
         
      </div>
      <div class="header-right">
      <span class="iconfont icon-fangdajing"></span>
      </div>
    </header>
            <div class="centent">
            <section class="liveStreaming" >
                <!-- {{live}} -->
                <div class="live-01">  直播公开课  <span>  自研 </span></div>
                <div class="live-02" v-for="Classify05 in Classify05" :key="Classify05.id">
                  <div>
                      <router-link :to="'/Classify01/'+Classify05.id/1+17">
                    <img :src="Classify05.img01">
                      </router-link>
                  </div>
                  <div>
                    <span>{{Classify05.name}}</span>
                     <span>{{Classify05.teachar}} <p>{{Classify05.ranking}}</p></span>
                      <span>直播时间：{{Classify05.time}}</span>
                  </div>
                </div>
                
            </section>
            
<section class="msg01" >
  <h2>23考研 | 在校生</h2>
  <div >
<div class="msg02" v-for="Classify05 in Classify05" :key="Classify05.id">
    <div>
        <router-link :to="'/Classify01/'+Classify05.id/1+17">
    <img :src="Classify05.img02" >
      </router-link>
  </div>
  <div >
    <span> {{Classify05.kind01}}</span> <span>{{Classify05.ranking01}}</span><br>
    <span>{{Classify05.fen}}</span><br>
    <span>{{Classify05.price}}</span>
  </div>
  </div>
  </div>
  
</section>


         
        </div>
 </div>
  </div>
</template>

<script>
export default {
  name: "Classify05",
  data() {
    return {
      Classify05: [],
    };
  },
  created(){
        let xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:3000/Classify05/",true);
        xhr.onreadystatechange = () =>{
            if(xhr.readyState ==4 && xhr.status==200){
                console.log("xhr.responseText",xhr.responseText);
                this.Classify05 = JSON.parse(xhr.responseText);
            }
        }
        xhr.send()
    },
  methods: {
    goBack02() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
@import url(../../iconfont/iconfont.css);
header {
    width: 90%;
    height:.5rem;
    line-height: .5rem;
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: .24rem;
    margin: auto;
}
.icon-fangdajing{
  font-size: .26rem;
}
.header-left {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(73, 73, 73, 0.452);
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.35rem;
  color: white;
}
.box {
  width: 100%;
  height: 100%;
  position: relative;
   display: flex;
  flex-direction: column;
}
.nav{
  display: flex;
}
.header-centent{
  text-align: center;
  margin: auto;
}
.centent{
  width: 100%;
  height: .3rem;
  line-height: .3rem;
}
.live-01{
  font-size: .24rem;
  font-weight: bold;
    display: flex;
    margin-top: .2rem;
    margin-left: .2rem;
}
.live-01 span{
   font-size: .18rem;
  font-weight: normal;
  background: orangered;
  width: .5rem;
  height: .3rem;
  color: white;
  margin-left: .2rem;
  text-align: center;
}
.live-02{
  width: 80%;
  display: flex;
  margin-top: .2rem;
 margin-left: .2rem;
}
.live-02 div:nth-child(1){
  width: 1rem;
  height: 1rem;
}
.live-02 div:nth-child(1) img{
  width: 100%;
  height: 100%;
}
.live-02 div:nth-child(2){
  margin-left: .2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.live-02 div:nth-child(2) span{
  display: flex;
}
.live-02 div:nth-child(2) span:nth-child(1){
  font-size: .16rem;
  font-weight: bolder;
}

.live-02 div:nth-child(2) span:nth-child(2){
  color: rgb(83, 82, 82);
}
.live-02 div:nth-child(2) span:nth-child(2) p{
  color: orangered;
  margin-left: .1rem;
  width: auto;
  height: auto;
  border: .01rem solid orangered;
  border-radius: 20%;
  font-size: .12rem;
}
.msg01{
 margin-left: .2rem;
  margin-top: .2rem;
}
.msg01 h2{
  margin-bottom: .2rem;
}
.msg02{
  display: flex;
  margin-top: .2rem;
 
}
.msg02 div:nth-child(1){
    width: 1.3rem;
    height: 0.7rem;
}
.msg02 div:nth-child(1) img{
  width: 100%;
  height: 100%;
}
.msg02 div:nth-child(2){
  width: 1.3rem;
   line-height: .2rem;
   margin-left: .2rem;
}
.msg02 div:nth-child(2) span:nth-child(6){
  color: orangered;
}
</style>
